import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({
  template: require('./event-edit.html')
})
export default class EventEditComponent extends Vue {
  @Prop({
    default: 'Default Value'
  })
  message: string; // @Prop => @Input()

  created () {} // created => NgInit

  // <div :data="data" ></div> => <div [data]="data" ></viv>

  dialogTechnicalVisible: boolean = false

  formLabelWidth = '80px'

  textarea: string = ''

  eventForm: any = {
    name: '',
    region: '',
    date1: '',
    date2: '',
    stockType: '',
    type: '',
    public: false,
    price: '',
    free: true,
    resource: '',
    desc: '',
    list: []
  }

  technicalForm: any = {
    name: '',
    value: '',
    option: 0,
    length: 5,
    optionMap: ['大于', '小于', '等于'],
    optionText: ''
  }

  form: any = {
    name: '',
    region: '',
    date1: '',
    date2: '',
    type: [],
    public: false,
    price: '',
    free: true,
    resource: '',
    desc: ''
  }

  onAddModule () {}

  onAddTechnical () {
    this.technicalForm = {
      name: '',
      value: '',
      option: 0,
      length: 5,
      optionMap: ['大于', '小于', '等于'],
      optionText: '',
      isMust: false,
      level: 0
    }
    this.dialogTechnicalVisible = true;
  }

  onSubmitAddTechnical () {
    console.log(this.technicalForm)
    this.technicalForm.optionText = this.technicalForm.optionMap[this.technicalForm.option]
    this.eventForm.list.push(this.technicalForm)
    this.technicalForm = {
      name: '',
      value: '',
      option: 0,
      length: 5
    }
    this.dialogTechnicalVisible = false;
  }

  onSubmit () {}

  onHandleClose (item: any, index: any) {
    console.log(item)
    this.eventForm.list.splice(index, 1)
  }

  onEditTechnical(item: any, index: any) {
    this.dialogTechnicalVisible = true;
    this.technicalForm = item;
  }
}
